ASP.Net MVC-তে Unobtrusive AJAX এবং Validation দুটি অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য যা অ্যাপ্লিকেশনটির ইউজার ইন্টারফেসের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। Unobtrusive AJAX ব্যবহার করে আমরা সাইটের কোনও পৃষ্ঠার রিফ্রেশ ছাড়াই ডেটা লোড বা আপডেট করতে পারি। অন্যদিকে, Unobtrusive Validation ব্যবহার করে ব্যবহারকারীর ইনপুট যাচাই করা যায়, যা ইউজার এক্সপেরিয়েন্স উন্নত করে এবং ক্লায়েন্ট সাইডে ত্রুটি সনাক্ত করতে সহায়ক হয়।

Unobtrusive AJAX

Unobtrusive AJAX এমন একটি কৌশল যেখানে AJAX কার্যক্রমের জন্য কোন বিশেষ JavaScript কোড ম্যানুয়ালি লিখতে হয় না। ASP.Net MVC-এর সাথে Unobtrusive AJAX একটি সহজ এবং কার্যকরী পদ্ধতি হিসেবে কাজ করে, যেখানে AJAX কলগুলি মডেল-বাইন্ডিং এবং ভিউ রেন্ডারিং-এর মধ্যে অন্তর্ভুক্ত থাকে এবং এটি কোনো অবাঞ্ছিত বা অপ্রয়োজনীয় JavaScript কোডের প্রয়োজন হয় না।

ASP.Net MVC-তে Unobtrusive AJAX ব্যবহার করার জন্য কিছু নির্দিষ্ট স্টেপ অনুসরণ করতে হয়।

Unobtrusive AJAX এর উদাহরণ

ধরা যাক, আমাদের একটি Student মডেল রয়েছে, এবং আমরা চাই যে যখন ব্যবহারকারী একটি নির্দিষ্ট ছাত্রের ডেটা নির্বাচন করবেন, তখন সঠিক তথ্য AJAX এর মাধ্যমে লোড হবে।

1. Student মডেল:

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
}

2. কন্ট্রোলারের Action Method:

public class StudentController : Controller
{
    public ActionResult GetStudentDetails(int id)
    {
        Student student = new Student
        {
            Id = id,
            Name = "Student Name " + id
        };
        return PartialView("_StudentDetails", student);
    }
}

3. ভিউ তৈরি করা:

@using (Html.BeginForm())
{
    @Html.DropDownListFor(model => model.Id, new SelectList(Model, "Id", "Name"), "Select a Student", new { @class = "student-dropdown" })
}

<div id="student-details"></div>

<script type="text/javascript">
    $(function () {
        $(".student-dropdown").change(function () {
            var studentId = $(this).val();
            $.ajax({
                url: '@Url.Action("GetStudentDetails", "Student")',
                data: { id: studentId },
                type: 'GET',
                success: function (data) {
                    $("#student-details").html(data);
                }
            });
        });
    });
</script>

এখানে, আমরা ড্রপডাউন মেনু ব্যবহারকারীর একটি Student নির্বাচন করার জন্য তৈরি করেছি। যখন একটি ছাত্র নির্বাচন করা হয়, তখন AJAX কলটি চালু হবে এবং পরবর্তী তথ্য সার্ভার থেকে পেতে পারবে এবং সেই তথ্যটিকে ক্লায়েন্ট সাইডে সরাসরি প্রদর্শন করবে।

Unobtrusive Validation

Unobtrusive Validation হল একটি কৌশল যেখানে ডেটা যাচাই শুধুমাত্র HTML মার্কআপ এবং JavaScript কোডের মাধ্যমে করা হয়, এবং এটি কোডে সরাসরি জাভাস্ক্রিপ্ট লেখা ছাড়াই কাজ করে। ASP.Net MVC-তে Unobtrusive Validation মডেল ক্লাসে ডেটা অ্যাট্রিবিউট এবং ভিউতে JavaScript বিনামূল্যে ডেটা যাচাইয়ের সুবিধা প্রদান করে।

ASP.Net MVC-তে Unobtrusive Validation সক্ষম করার জন্য jquery.validate এবং jquery.validate.unobtrusive স্ক্রিপ্ট লোড করতে হবে।

Unobtrusive Validation এর উদাহরণ

ধরা যাক, আমরা একটি ফর্ম তৈরি করতে চাই, যেখানে ব্যবহারকারীর নাম এবং ইমেল ঠিকানা যাচাই করা হবে।

1. Student মডেল তৈরি করা:

public class Student
{
    [Required(ErrorMessage = "Name is required")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Email is required")]
    [EmailAddress(ErrorMessage = "Invalid email address")]
    public string Email { get; set; }
}

2. ভিউ তৈরি করা:

@model YourNamespace.Models.Student

@using (Html.BeginForm())
{
    <div>
        <label for="Name">Name:</label>
        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Name)
    </div>
    
    <div>
        <label for="Email">Email:</label>
        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Email)
    </div>
    
    <button type="submit">Submit</button>
}

3. স্ক্রিপ্ট লোড করা:

ভিউতে জাভাস্ক্রিপ্ট লোড করার জন্য এই স্ক্রিপ্টগুলি অন্তর্ভুক্ত করতে হবে:

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate.unobtrusive/3.2.0/jquery.validate.unobtrusive.min.js"></script>

এখন, ফর্মটি সাবমিট করার আগে Unobtrusive Validation স্বয়ংক্রিয়ভাবে মডেল অ্যাট্রিবিউটগুলির সাহায্যে ফর্মের ইনপুট যাচাই করবে এবং যদি কোনো ত্রুটি থাকে তবে তা ব্যবহারকারীর সামনে দেখাবে।

Unobtrusive AJAX এবং Validation এর সুবিধা

• উন্নত ইউজার এক্সপেরিয়েন্স: Unobtrusive AJAX ব্যবহারকারীকে পৃষ্ঠার রিফ্রেশ ছাড়াই ডেটা প্রক্রিয়া করার সুযোগ দেয়, যা দ্রুত এবং রেসপন্সিভ ইউজার এক্সপেরিয়েন্স প্রদান করে।
• সহজ ইন্টিগ্রেশন: Unobtrusive Validation কোডিং এড়িয়ে ব্যবহারকারীর ইনপুট যাচাই করার জন্য সহজ উপায় প্রদান করে।
• ক্লায়েন্ট সাইডে ত্রুটি সনাক্তকরণ: ইনপুট যাচাইয়ের ফলে ফর্মটি সাবমিট হওয়ার আগে ত্রুটিগুলি সনাক্ত করা সম্ভব হয়, যার ফলে সার্ভার সাইডে অপ্রয়োজনীয় রিকোয়েস্ট কমে যায়।

সারমর্ম

Unobtrusive AJAX এবং Validation হল দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ASP.Net MVC-তে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়ক। Unobtrusive AJAX পৃষ্ঠার রিফ্রেশ ছাড়া ডেটা লোড এবং প্রক্রিয়া করার সুবিধা দেয়, যখন Unobtrusive Validation ব্যবহারকারীর ইনপুট যাচাই করার জন্য ক্লায়েন্ট সাইডে ত্রুটি সনাক্তকরণ প্রক্রিয়া সহজ করে। এই দুটি ফিচার আধুনিক ওয়েব অ্যাপ্লিকেশনের জন্য অত্যন্ত গুরুত্বপূর্ণ।